import {Table, Column, Cell, HeaderCell, TablePagination} from  './../rsuite/table/';
import {
    Dropdown,
    Button,
    Checkbox,
    CheckboxList,
    Row,
    Col,
    Grid,
    FormControl,
    InputGroup,
    FormGroup
} from  './../rsuite';
import fakeObjectDataListStore from '../data/fakeObjectDataListStore';
import fakeObject from '../data/fakeObject';
import F from './../libs/fetch';
import URL from './../libs/Url';

let DateCell = ({rowData, dataKey, ...props}) => (
    <Cell {...props} >
        {rowData[dataKey].toLocaleString() }
    </Cell>
);

function formatLengthMenu(lengthMenu) {
    return (
        <div className="table-length">
            <span> 每页 </span>
            {lengthMenu}
            <span> 条 </span>
        </div>
    );
}

function formatInfo(total, activePage) {
    return (
        <span>共 <i>{total}</i> 条数据</span>
    );
}

const TimeCell = ({rowData, dataKey, ...props}) => {
    return (
        <Cell {...props}>
            {Moment(rowData[dataKey]).format('YYYY-MM-DD HH:mm:SS')}
        </Cell>
    );
};
const PaginationTable = React.createClass({
    getInitialState() {
        return {
            enableDelete: false,
            size: 15,
            selected: {},
            total: 0,
            data: []
        };
    },
    componentDidMount(){
        console.log(Moment(Date.now()).format('YYYY-MM-DD HH:mm:SS'))
    },
    componentWillMount(){
        const self = this;
        return self.setState(Object.assign({}, ...self.state, {data: fakeObject(5)}))
        F.fetch(URL.Get_NEWS_CATEGORY_S, {method: 'POST', body: {}})
            .then((res) => {
                self.setState(Object.assign({}, ...self.state, res))
            });

    },

    handleChangePage(dataKey) {
        const self = this;
        self.setState(Object.assign({}, {page: dataKey}))
        return;
        F.fetch(URL.Get_NEWS_CATEGORY_S, {
            method: 'POST',
            body: {
                currentPage: dataKey,
                pageSize: this.state.size || 15
            }
        })
            .then((res) => {
                self.setState(Object.assign({}, ...self.state, res))
            })
    },
    handleChangeLength(dataKey) {
        const self = this;
        self.setState(Object.assign({}, {size: dataKey}))
        return;
        F.fetch(URL.Get_NEWS_CATEGORY_S, {method: 'POST', body: {pageSize: dataKey || 15}})
            .then((res) => {
                self.setState(Object.assign({}, ...self.state, res))
            })
    },

    remove(item){

        const self = this;

        self.setState(Object.assign({}, self.state, {
            data: [
                ...self.state.data.slice(0, item.index),
                ...self.state.data.slice(item.index + 1)
            ]
        }));
        if (!self.state.selected[item.classifyid]) {
            self.state.selected[item.classifyid] = item;
        } else {
            delete self.state.selected[item.classifyid]
        }
        self.setState({
            selected: self.state.selected
        })

        // return ;
        //
        // F.fetch(URL.CATEGORY_DELETE, {method: 'POST', body: {classifyids: item.classifyid}})
        //     .then((res)=> {
        //         self.setState(Object.assign({}, self.state, {
        //             data: [
        //                 ...self.state.data.slice(0, item.index),
        //                 ...self.state.data.slice(item.index + 1)
        //             ]
        //         }));
        //         if (!self.state.selected[item.classifyid]) {
        //             self.state.selected[item.classifyid] = item;
        //         } else {
        //             delete self.state.selected[item.classifyid]
        //         }
        //         self.setState({
        //             selected: self.state.selected
        //         })
        //         console.log(res)
        //     })
    },
    selectAll(){
        const self = this;
        this.setState(Object.assign({}, ...self.state, this.state.data.map((item)=> {
            item.checked = !item.checked;
            if (item.checked) {
                self.setState({enableDelete: false});
            }
            return item;
        })))
        self.setState({enableDelete: false});
    },
    render() {
        const {data} = this.state;
        const self = this;


        return (

            <div>
                <Row>
                    <Col xs={6} md={6}>
                        <Button shape='primary' size="sm" onClick={this.open}>
                            <i className="fa fa-plus"></i> 新建
                        </Button>
                        <Button disabled={!this.state.enableDelete} shape='default' size="sm">删除</Button>
                    </Col>
                    <Col xs={6} md={3} mdOffset={3}>
                        <FormGroup>
                            <InputGroup size="sm">
                                <FormControl type="text" placeholder="请输入关键字..."/>
                                <InputGroup.Addon><i className="fa fa-search"></i></InputGroup.Addon>
                            </InputGroup>
                        </FormGroup>
                    </Col>
                    <Col xs={12} md={12}>
                        <table className="table table-bordered table-striped general-table">
                            <thead>
                            <tr>
                                <th style={{width: '50px'}}>
                                    <input type="checkbox" onClick={this.selectAll}/>
                                </th>
                                <th style={{width: '60px'}}>NO.</th>
                                <th>名称</th>
                                <th>描述</th>
                                <th>文章数量</th>
                                <th style={{width: '120px'}}>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.data.map((item, index)=> {
                                    item.index = index;
                                    return <tr key={index}>
                                        <td>
                                            <input type="checkbox" checked={(item.checked ? 'checked' : '')}
                                                   onClick={()=> {
                                                       console.log(self.state.selected)
                                                       if (!self.state.selected[item.classifyid]) {
                                                           self.state.selected[item.classifyid] = item;
                                                       } else {
                                                           delete self.state.selected[item.classifyid]
                                                       }
                                                       self.setState({
                                                           selected: self.state.selected
                                                       })
                                                   }
                                                   }/>
                                        </td>
                                        <td className="hidden-phone">{index + 1}</td>
                                        <td>{item.name}</td>
                                        <td>{item.comment}</td>
                                        <td>{item.desc}</td>
                                        <td>
                                            <button className="btn btn-default btn-xs" type="button"><i
                                                className="fa fa-search-plus"></i>
                                            </button>
                                            <button className="btn btn-default btn-xs" type="button"><i
                                                className="fa fa-pencil"></i></button>
                                            <button className="btn btn-default btn-xs"
                                                    onClick={()=> self.remove(item)}
                                                    type="button"><i
                                                className="fa fa-times"></i></button>
                                        </td>
                                    </tr>
                                })
                            }
                            </tbody>
                        </table>
                    </Col>
                </Row>
            </div>
        );
    }
});

export default PaginationTable;